<template>
  <div v-loading class="app-container">
    <div style="position: absolute;z-index: 4;display: flex;justify-content: center;width: auto;height: auto;left: 45%">
      <NoticeList ref="noticeRef"></NoticeList>
    </div>

    <NavBar />
    <div :class="route.path == '/profile' || route.path == '/create' ? 'main' : ''"
      style="width:90vw;display: flex;flex-direction: column;height: 100vh">
      <div class="header">
        <Header></Header>
      </div>
      <div class="main-content">
        <router-view />
      </div>
      <div class="footer">
        <img class="img" style="border: 0;height: 20px;margin-right: 10px"
          src=""
          alt="">
        <span style="color: white;margin-right: 10px;">鲁ICP备2024094106号-2</span>
        <span style="color: white">Copyright © 2025-present YuanDing</span>

      </div>
    </div>
    <!--  登录表单  -->
    <div v-if="loginDialogStore.isShow" class="login-container">
      <div class="login">
        <div v-if="isLogin" class="loginLoding">
          <div class="loginLoding-content"></div>
        </div>
        <div style="position: absolute;right: 20px;top: 20px;">
          <CloseIcon style="font-size: 20px;cursor: pointer" @click="loginDialogStore.isShow = false" />
        </div>
        <h1 style="text-align: center;flex: 0 auto;font-weight: bolder;font-size: 20px;margin-top: 20px;">登录后免费畅享高清视频
        </h1>
        <div class="login-content">
          <div style="flex: 1;">
            <img style="width: 100%;object-fit: cover" src="@/assets/loginbac2.png" alt="">
          </div>
          <div class="login-box" style="flex: 1;">
            <div>
              <div style="text-align: center;font-size: 16px;margin-bottom: 30px">验证码登录</div>
              <div>
                <div class="input-wrapper">
                  <span class="tel-prefix">+86</span>
                  <input v-model="phone" class="input tel" type="text" placeholder="请输入手机号">
                </div>
                <div class="input-wrapper">
                  <span style="cursor: pointer" class="password-prefix" @click="getVerificationCode"
                    :style="{ color: countdown > 0 ? '#999' : '#333' }">
                    {{ countdown > 0 ? `${countdown}秒后重新获取` : '获取验证码' }}
                  </span>
                  <input v-model="code" class="input password" type="text" placeholder="请输入验证码">
                </div>
              </div>
            </div>
            <div style="display: flex; flex-direction: column;align-items: center">
              <button :style="{
                backgroundColor: phone && code ? '#fe2c55' : '#ff93a7'
                , cursor: phone && code ? 'pointer' : 'not-allowed'
              }" @click="handleLogin">登录 / 注册</button>
              <span style="color:#c0c0d6;margin-top: 5px">登录或注册即代表同意 用户协议 和 隐私政策 </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>

import { useLoginDialogStore } from '@/stores/modules/loginDialog.js'
const loginDialogStore = useLoginDialogStore();
import NavBar from '@/components/NavBar.vue'
import Header from "@/components/Header.vue";
import { useRoute } from "vue-router";
import { onBeforeUnmount, onMounted, ref, watch } from 'vue';
import { CloseIcon } from "tdesign-icons-vue-next";
import { MessagePlugin, NotifyPlugin } from 'tdesign-vue-next';
import { useUserStore } from "@/stores/modules/user.js";
const userStore = useUserStore()
const noticeRef = ref(null)
const route = useRoute();
import { reqHeartbeat, reqLogin } from "@/api/user/index.js";
import { useMessageStore } from "@/stores/modules/message.js";
import NoticeList from "@/components/ui/NoticeList.vue";
const isLogin = ref(false)
const phone = ref('');
const code = ref('');
const countdown = ref(0);
let timer = null;

const messageStore = useMessageStore()

watch(
  () => messageStore.currentMessage,
  (newMessage, oldMessage) => {
    noticeRef.value.addNotice({
      name: newMessage.name,
      description: newMessage.content,
      time: "刚刚",
      icon: newMessage.avatar,
      color: "#00C9A7",
    })
  },
  { deep: true }
)

// 挂载完毕订阅消息
onMounted(() => {
  messageStore.createConnect();
  messageStore.initAudioContext()
  startHeartbeat()
})

const startHeartbeat = () => {
  setInterval(() => {
    if (userStore.userId) {
      reqHeartbeat()
    }
  }, 10000)
}
// 获取验证码
const getVerificationCode = () => {
  if (countdown.value > 0) return;

  if (!phone.value) {
    MessagePlugin.error({ content: '请填写手机号' })
    return;
  }

  // 这里添加实际获取验证码的API调用
  // await getCodeApi(phone.value);
  MessagePlugin.success({ content: '验证码发送成功！' })
  // 开始倒计时
  countdown.value = 60;
  timer = setInterval(() => {
    countdown.value--;
    if (countdown.value <= 0) {
      clearInterval(timer);
    }
  }, 1000);
};

// 登录
const handleLogin = async () => {
  if (!phone.value || !code.value) {
    return;
  }

  if (/^(?:(?:\+|00)86)?1[3-9]\d{9}$/.test(phone.value)) {
    isLogin.value = true;
    try {
      const res = await reqLogin({ phone: phone.value, code: code.value });
      if (res.code === 200) {
        userStore.token = res.data
        localStorage.setItem("token", res.data)
        await userStore.userInfo()
        loginDialogStore.isShow = false
        phone.value = ''
        code.value = ''
        NotifyPlugin.success({ title: 'Hello', content: '欢迎回来，' + userStore.nickName + '~' })
      } else {
        MessagePlugin.error({ content: res.msg })
      }
    } catch (error) {
      isLogin.value = false;
    }
  } else {
    MessagePlugin.error({ content: '请填写正确格式的手机号' })
  }
  isLogin.value = false;

};

// 组件卸载时清除定时器
onBeforeUnmount(() => {
  if (timer) clearInterval(timer);
});
</script>

<style scoped>
/* HTML: <div class="loader"></div> */
.loginLoding-content {
  --c: no-repeat linear-gradient(rgba(0, 0, 0, 0.8) 0 0);
  background:
    var(--c) 0 0,
    var(--c) 0 50%,
    var(--c) 0 100%,
    var(--c) 50% 0,
    var(--c) 50% 50%,
    var(--c) 50% 100%,
    var(--c) 100% 0,
    var(--c) 100% 50%,
    var(--c) 100% 100%;
  background-size: 16px 16px;
  animation: l31 .5s infinite alternate;
}

@keyframes l31 {

  0%,
  20% {
    width: 45px;
    height: 45px
  }

  90%,
  100% {
    width: 65px;
    height: 65px
  }
}

.loginLoding {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(245, 245, 245, 0.6);
  border-radius: 20px;
  z-index: 9;
}

.input-wrapper {
  position: relative;
  margin-bottom: 20px;
}

.tel-prefix {
  position: absolute;
  left: 15px;
  top: 45%;
  transform: translateY(-50%);
  color: #333;
  z-index: 2;
  font-size: 14px;
  font-weight: bolder;
}

.password-prefix {
  position: absolute;
  right: 15px;
  top: 45%;
  transform: translateY(-50%);
  color: #333;
  z-index: 2;
  font-size: 14px;
  font-weight: bolder;
}

.input {
  outline: none;
  width: 100%;
  border: none;
  border-radius: 10px;
  height: 50px;
  background-color: rgb(235, 235, 235);
  font-size: 14px;
  color: #444447;
  padding: 10px 0;
  box-sizing: border-box;
  position: relative;
}

.tel {
  margin-bottom: 0px;
  position: relative;
  padding-left: 50px;
}

.password {
  padding: 0 20px;
  padding-right: 120px;
}

.login-box {
  border-left: 1px solid rgba(235, 235, 235);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 50px 80px;
  padding-top: 10px;
}

.login-content {
  flex: 1;
  box-sizing: border-box;
  padding: 20px;
  display: flex;
}

.login {
  display: flex;
  flex-direction: column;
  width: 730px;
  height: 500px;
  background-color: white;
  position: relative;
  background-image: url("@/assets/login-bac.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 20px;
}

.login-container {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
}

.main {
  background:
    linear-gradient(to right, rgba(28, 28, 50, 1), rgba(0, 0, 0, 0.1)),
    url("@/assets/user-Bac.png") no-repeat center center / cover;
}

.footer {
  width: 100%;
  background-color: transparent;
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.header {
  width: 100%;
  background-color: transparent;
  flex: 2;
}

.app-container {
  display: flex;
  min-height: 100vh;
  min-width: 100vw;
  position: relative;
}

.main-content {
  flex: 25;
  overflow: hidden;
}

button {
  width: 100%;
  height: 40px;
  background-color: #fe2c55;
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  margin-top: 20px;
}

button:hover {
  background-color: #f01e4a;
}
</style>
